<template>
  <div class="content">
    <div class="title">
      <h1>指标管理系统</h1>
    </div>
    <div class="form" style="width: 100%">
      <el-form :inline="true" class="demo-form-inline" :model="formInline">
        <el-form-item label="选择数据源">
          <el-select
              placeholder="选择数据源"
              style="width: 150px;"
              v-model="formInline.dataSource"
              clearable
              @change="onChangeDataSource"
          >
            <el-option v-for="(item,index) in dataSourceList" :key="index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>

        <el-form-item label="指标code">
          <el-input v-model="formInline.code" clearable placeholder="指标code" style="width: 200px;"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button type="primary" @click="onOpenDrawer">新增</el-button>
        </el-form-item>

      </el-form>
    </div>

    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" min-width="5%"/>
        <el-table-column label="指标code" min-width="15%">
          <template #default="scope">
            <el-input style="width: 100%" v-model="scope.row.code" type="textarea"/>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="指标名称" min-width="15%">
          <template #default="scope">
            <el-input style="width: 100%" v-model="scope.row.name" type="textarea"/>
          </template>
        </el-table-column>
        <el-table-column prop="fetchLogic" label="取数逻辑" min-width="22%">
          <template #default="scope">
            <el-input style="width: 100%" v-model="scope.row.fetchLogic" type="textarea"/>
          </template>
        </el-table-column>
        <el-table-column prop="mock" label="是否mock" min-width="8%">
          <template #default="scope">
            <el-input style="width: 100%" v-model="scope.row.mock"/>
          </template>
        </el-table-column>
        <el-table-column prop="mockData" label="mock数据" min-width="18%">
          <template #default="scope">
            <el-input style="width: 100%" v-model="scope.row.mockData" type="textarea"/>
          </template>
        </el-table-column>
        <el-table-column prop="active" label="有效性" min-width="6%">
          <template #default="scope">
            <el-input style="width: 100%" v-model="scope.row.active"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="11%">
          <template #default="scope">
            <el-button type="primary" style="margin-bottom: 3px" @click="onRowChange(scope.$index,scope.row)">修改
            </el-button>
            <el-button type="primary" @click="onDetails(scope.$index,scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page">
      <el-pagination background
                     layout="sizes,prev, pager, next,total"
                     :total="pageData.total"
                     :page-sizes="pageSizes"
                     @change="onPageChange"
      />
    </div>


  </div>


  <el-drawer
      v-model="drawerFlag"
      title="新增指标项"
      direction="ltr"
      class="demo-drawer"
      size="50%"
      @close="onDrawerClose"
  >
    <div class="drawer-content">
      <el-form :model="formAdd" label-width="100px" label-position="right">

        <el-form-item label="指标code">
          <el-input v-model="formAdd.code" clearable style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="指标名称">
          <el-input v-model="formAdd.name" clearable style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="取数逻辑">
          <el-input v-model="formAdd.fetchLogic" clearable style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="是否mock">
          <el-input v-model="formAdd.mock" clearable style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="mock数据" size="large">
          <el-input v-model="formAdd.mockData" clearable style="width: 100%;"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onAdd">新增</el-button>
        </el-form-item>

      </el-form>
    </div>
  </el-drawer>


  <el-drawer
      v-model="detailsDrawerFlag"
      title="详情"
      direction="rtl"
      class="demo-drawer"
      size="50%"
      @close="onDetailsDrawerClose"
  >
    <div class="drawer-content">
      <h3 style="margin-bottom: 10px">接口url:</h3>
      <el-text>{{ urlPath }}</el-text>
      <div>
        <el-radio-group v-model="radioValue" style="margin-top: 10px">
          <el-radio :value="1">单条返回</el-radio>
          <el-radio :value="2">集合返回</el-radio>
          <el-radio :value="3">分页查询</el-radio>
          <el-radio :value="4">是否mock</el-radio>
        </el-radio-group>
      </div>
      <h3 style="margin-top: 10px;margin-bottom: 10px">业务参数(JSON格式):</h3>
      <el-input
          v-model="businessParams"
          style="width:100%"
          :rows="2"
          type="textarea"
      />
      <h3 style="margin-top: 10px;margin-bottom: 10px">最终接口url:</h3>
      <el-text>{{ finalUrlPath }}</el-text>
      <h3 style="margin-top: 10px;margin-bottom: 10px">预览结果:</h3>
      <el-card style="max-width: 100%">
        <el-text>{{ finalUrlResult }}</el-text>
      </el-card>

      <div style="margin-top: 10px">
        <el-button type="primary" @click="onOverviewResult">预览结果</el-button>
        <el-button type="primary" @click="onBuildFinalUrl">生成最终URL</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import {reqListDataSource, reqPageIndicator, reqAddIndicator, reqUpdateIndicator, reqIndicatorQuery} from '@/api/index'
import {ElMessage} from "element-plus";

const formInline = reactive({
  dataSource: '',
  code: ''
})
const pageSizes = [10, 20, 30, 50]
let dataSourceList = reactive([])
let tableData = ref([])
let urlPath = ref("")
let radioValue = ref(1)
let businessParams = ref("")
let finalUrlPath = ref("")
let finalUrlResult = ref("")

let pageData = ref({
  pageSize: 10,
  currentPage: 1,
  total: 0
})
let drawerFlag = ref(false)
let detailsDrawerFlag = ref(false)
let formAdd = reactive({
  code: '',
  name: '',
  mock: '',
  mockData: '',
  fetchLogic: ''
})

onMounted(() => {
  getDataSource()
})
const onChangeDataSource = () => {
  listPageData()
}

const listPageData = async () => {
  let {dataSource, code} = formInline
  let params = {
    'region': dataSource,
    code,
    'currentPage': pageData.value.currentPage,
    'pageSize': pageData.value.pageSize
  }
  let res = await reqPageIndicator(params)
  tableData.value = res.data.records
  pageData.value.currentPage = res.data.current
  pageData.value.total = res.data.total
}

let getDataSource = async () => {
  let res = await reqListDataSource();
  dataSourceList = Object.assign(dataSourceList, res.data)
}

const onPageChange = (currentPage, pageSize) => {
  pageData.value.currentPage = currentPage
  pageData.value.pageSize = pageSize
  listPageData()
}

const onQuery = async () => {
  if (formInline.dataSource === '') {
    ElMessage.error('请先选择数据源')
    return
  }
  listPageData()
}
const onRowChange = async (index, rowData) => {
  let {code, name, fetchLogic, mock, mockData, active, id} = rowData
  await reqUpdateIndicator({code, name, fetchLogic, mock, mockData, active, id})
  ElMessage.success('指标项修改成功')
}

const onOpenDrawer = () => {
  if (formInline.dataSource === '') {
    ElMessage.error('请先选择数据源')
    return
  }

  drawerFlag.value = true
}

const onDetailsDrawerClose = () => {
  finalUrlResult.value = ""
  radioValue.value = 1
  businessParams.value = ""
}

const onDrawerClose = () => {
  formAdd = Object.assign(formAdd, {
    code: '',
    name: '',
    mock: '',
    mockData: '',
    fetchLogic: ''
  })
  onChangeDataSource()
}

const onAdd = async () => {
  let {code, name, mockData, mock, fetchLogic} = formAdd
  await reqAddIndicator({code, name, mockData, mock, fetchLogic, 'region': formInline.dataSource})
  formAdd = Object.assign(formAdd, {
    code: '',
    name: '',
    mock: '',
    mockData: '',
    fetchLogic: ''
  })
  ElMessage.success('指标项新增成功')
}

const onDetails = (index, rowData) => {
  urlPath.value = `http://172.22.168.18/indicator-screen/dynamic/query?region=${formInline.dataSource}&token=SXDWUw8D7YKn.ueGxDe*G5mBv.S-KFu@Z*d&code=${rowData.code}`
  finalUrlPath.value = `${urlPath.value}&singleData=1`
  detailsDrawerFlag.value = true
}

const onBuildFinalUrl = () => {
  let tempUrl = `${urlPath.value}&singleData=1`
  if (radioValue.value === 1) {
    tempUrl = `${urlPath.value}&singleData=1`
  }
  if (radioValue.value === 2) {
    tempUrl = `${urlPath.value}`
  }
  if (radioValue.value === 3) {
    tempUrl = `${urlPath.value}&pageData=1`
  }
  if (radioValue.value === 4) {
    tempUrl = `${urlPath.value}&mock=1`
  }
  if (businessParams.value !== "") {
    let jsonParams = encodeURIComponent(businessParams.value);
    tempUrl = `${tempUrl}&paramsStr=${jsonParams}`
  }
  finalUrlPath.value = tempUrl
}

const onOverviewResult = async () => {
  onBuildFinalUrl()

  let res = await reqIndicatorQuery(finalUrlPath.value)

  finalUrlResult.value = JSON.stringify(res)
}

</script>

<style scoped lang="scss">
.content {
  width: 100%;
  padding: 20px;

  .title {
    text-align: center;
    font-size: 32px;
  }

  .form {
    margin-top: 20px;
  }

  .page {
    margin-top: 20px;
  }
}

</style>
